<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
  
    <h:head>
	</h:head>
	
	<body>
	<p:tabView id="tabView">
	
	 <p:tab id="tab1" title="Cadastro"> 
	 	<p:messages id="messages" /> 
		<h:message for="frmCliente"/>
			<h:form id="frmCliente">
			<h:panelGrid columns="2" id="panelCliente" >
			
				<h:outputLabel value="Nome:" for="txtNome" />
				<h:inputText  id ="txtNome" value="#{clienteBean.nome}" required="true" />		
				<h:outputLabel value="Data de Nascimento:" for="dataNascimento" />
				<h:inputText id="dataNascimento" value="#{clienteBean.dataNascimento}" >
				<f:convertDateTime pattern="dd/MM/yyyy"/>
				</h:inputText>
				<h:outputLabel value="CPF "/>  
	            <p:inputMask value="#{clienteBean.cpf}" mask="999.999.999-99"/>
	            <h:outputLabel value="Telefone:" />  
	            <p:inputMask value="#{clienteBean.telefone}" mask="(99) 9999-9999"/>
	            <h:outputLabel value="Sexo"/> 
				<h:selectOneMenu id="sexo" value="#{clienteBean.sexo}" >  
                        <f:selectItems value="#{sexoEnumBean.sexo}"  
                            var="sx"   
                            itemLabel="#{sx}"  
                            itemValue="#{sx}" />  
                 </h:selectOneMenu> 
				
			</h:panelGrid>
			<h:commandButton action="#{clienteBean.salvar}" update="panelCliente" value="Salvar" />
			</h:form>
		</p:tab>
		
	<p:tab id="tab2" title="Lista"> 
		<h:form id="frmLista">
		 <p:dataTable id="tblCliente" var="c" value="#{clienteBean.clientes}" editable="true">
			<p:column id="nomeCliente" filterBy="#{c.nome}" headerText="Nome">
				<p:cellEditor>
				<f:facet name="output">
				<h:outputText value="#{c.nome}"/>
				</f:facet>
				<f:facet name="input">
				<h:inputText value="#{c.nome}" required="true" />
				</f:facet>
				</p:cellEditor>
			</p:column >
			<p:column id="cpfCliente" filterBy="#{c.cpf}" headerText="CPF">
			<p:cellEditor>
				<f:facet name="output">
				<h:outputText value="#{c.cpf}"/>
				</f:facet>
				<f:facet name="input">
				 <p:inputMask value="#{c.cpf}" mask="999.999.999-99" required="true"/>
				</f:facet>
			</p:cellEditor>
			</p:column>
			<p:column headerText="Data de Nascimento">
			<p:cellEditor>
				<f:facet name="output">
				<h:outputText value="#{c.dataNascimento}">
					<f:convertDateTime pattern="dd/MMM/yyyy"/>
				</h:outputText>
				</f:facet>
				<f:facet name="input">
				<h:inputText  value="#{c.dataNascimento}" required="true" >
				<f:convertDateTime pattern="dd/MM/yyyy"/>
				</h:inputText>
				</f:facet>
			</p:cellEditor>
			</p:column>
			<p:column headerText="Telefone">
			<p:cellEditor>
				<f:facet name="output">
				<h:outputText value="#{c.telefone}"/>
				</f:facet>
				<f:facet name="input">
				<p:inputMask value="#{c.telefone}" mask="(99) 9999-9999" required="true"/>
				</f:facet>			
			</p:cellEditor>
			</p:column>
			<p:column headerText="Sexo">
			<p:cellEditor>
				<f:facet name="output">
				<h:outputText value="#{c.sexo}"/>
				</f:facet>
				<f:facet name="input">
				      <h:selectOneMenu value="#{c.sexo}" required="true" >  
                        <f:selectItems value="#{sexoEnumBean.sexo}"  
                            var="sx"   
                            itemLabel="#{sx}"  
                            itemValue="#{sx}" />  
                    </h:selectOneMenu> 
				</f:facet>
			</p:cellEditor>
			</p:column>
			<p:column headerText="Alterar">			
					<p:rowEditor></p:rowEditor>						
			</p:column>
			<p:column headerText="Excluir">
				<f:facet name="header"></f:facet>
				<p:commandButton action="#{clienteBean.excluir}" icon="ui-icon-trash" update="tblCliente" >
				<f:param name="cpf" value="#{c.cpf}"/>				
				</p:commandButton>
			</p:column>
			
		</p:dataTable>


		</h:form>		
		</p:tab>
	</p:tabView>
    </body>
</ui:composition>